<%@page import="com.google.appengine.api.search.query.QueryParser.comparator_return"%>
<%@page import="java.net.URLEncoder"%>
<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="qualomelhor.database.ParametrosSistema.SiteHost"%>
<%@page import="qualomelhor.database.VotoComparacaoProduto"%>
<%@page import="qualomelhor.database.Comparacao.TipoComparacao"%>
<%@page import="qualomelhor.server.DAO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.HashMap"%>
<%@page import="qualomelhor.database.Comparacao"%>
<%@page import="qualomelhor.database.Categoria"%>
<%@page import="qualomelhor.database.Produto"%>
<%@page import="qualomelhor.database.Usuario"%>
<%@page import="qualomelhor.database.Resposta"%>
<%@page import="qualomelhor.database.ParametrosSistema.OrigemLogin"%>
<%@page import="qualomelhor.util.Util"%>
<%@page import="qualomelhor.util.Base64"%>
<%@page import="java.util.logging.Logger"%>

<%
	Logger log = Logger.getLogger("detalheComparacao.jsp");	
	log.info("An informational message.");
	HttpSession sess = request.getSession();
	String backgroundUrl = (String)session.getAttribute("BACKGROUND");
	String locale = (String)session.getAttribute("LOCALE");
	SiteHost site = SiteHost.getSiteHostPerHost(request.getServerName());
	String link = request.getParameter("link");
	String voto = request.getParameter("v");
	System.out.println("v = " + voto);
	boolean novaComparacao = false;
	String tmpStr = request.getParameter("new");
	if (tmpStr != null && tmpStr.equals("true")) {
		novaComparacao = true;
	}
	System.out.println("novaComparacao = " + novaComparacao);

	boolean jaVotou = false;
	VotoComparacaoProduto votoAtual = null;
%>

<%
	String app_id = "";	
	String app_secret = "";
	String namespace = "";
	if (request.getServerName().equals("www.qual-o-melhor.com")) {
		app_id = "343538035658997";
		app_secret = "8023bbeef61df4d7d0d059c4e9440427";
		namespace = "qual-o-melhor";
	} else if (request.getServerName().equals("www.which-is-better.net")) {
		app_id = "251470321613608"; 
		app_secret = "602baa2419a4306a1ab3d824201f9d82";
		namespace = "which-is-the-better";
	} else if (request.getServerName().equals("www.witch-is-better.com")) {
		app_id = "251471681589048";
		app_secret = "4367064af22143b7a397751083c7edaf";
		namespace = "witch-is-better";
	} else if (request.getServerName().equals("www.what-is-best.com")) {
		app_id = "394139290656345";
		app_secret = "a8d12db5357db58c50e556d6d020f9b2";
		namespace = "what-is-best";
	} else if (request.getServerName().equals("localhost")) {
		app_id = "251470321613608"; 
		app_secret = "602baa2419a4306a1ab3d824201f9d82";
		namespace = "which-is-the-better";
	} else {
		app_id = "343538035658997";
		app_secret = "8023bbeef61df4d7d0d059c4e9440427";
		namespace = "qual-o-melhor";
	}
%>

<%
	DAO d = new DAO();

	log.info("Vai setar o usuario...");
	HashMap<String, Object> mapSession = (HashMap<String, Object>)session.getAttribute("SESSIONVAR");

	if (mapSession == null) {
		mapSession = new HashMap<String, Object>(0);
	}

	Usuario uAnonimo = d.getUsuario("anonimo@anonimo.com");

	if (uAnonimo != null) { 
		log.info("usuarioanonimo.getname = " + uAnonimo.getNomeUsuario());
	} else {
		log.info("usuarioAnonimo = null!!!!!!!!!!!!!!!");
	}
	
	Usuario u = (Usuario)mapSession.get("USUARIOATUAL");
	boolean userAnonimo = false;
	if (u == null) {
		u = uAnonimo;
		userAnonimo = true;
	}

	log.info("u.getname = " + u.getNomeUsuario());

	String userImg = "";
	if (u.getOrigemLogin() == OrigemLogin.FACEBOOK.getSiteOrigem()) {
		userImg = "http://graph.facebook.com/" + u.getUserId() + "/picture";
	} else {
		userImg = "/images/anonyuser.jpg";
	}

	String idComparacao = request.getParameter("idcomparacao");

	Comparacao comp = d.getComparacao(Long.valueOf(idComparacao));

	if (comp != null) {
		log.info("comp.id = " + comp.getId());
		log.info("site = " + site.getHost());
		if (site.getHost().equals("localhost")) {
			site = comp.getSiteOriginal();
		}
	} else {
		response.sendRedirect("/mensagemErro?msg=" + URLEncoder.encode(Util.getConstant("Esta comparação não está disponível no momento. Lamentamos o inconveniente! Id:" + idComparacao, locale), "UTF-8"));
		return;
	}

	if (u != null) {
		log.info("u.getEmail() = " + u.getEmail());
		if (u.getEmail() != null && u.getEmail().equals("anonimo@anonimo.com")) {
			log.info("request.getRemoteAddr() = " + request.getRemoteAddr());
			votoAtual = comp.getVotoAtual(request.getRemoteAddr());
		} else {
			log.info("u.getId() = " + u.getId());
			votoAtual = comp.getVotoAtual(u.getId());
		}
	} else {
		log.info("u = null");
		response.sendRedirect("/mensagemErro?msg=user_null");
		return;
	}

	jaVotou = (votoAtual != null);

	Produto p1 = null;
	Produto p2 = null;
	long numVotosP1 = 0;
	long numVotosAnonimoP1 = 0;
	long numComentsP1 = 0;
	long numVotosP2 = 0;
	long numVotosAnonimoP2 = 0;
	long numComentsP2 = 0;
	ArrayList<VotoComparacaoProduto> listVotosP1 = null;
	ArrayList<VotoComparacaoProduto> listVotosP2 = null;

	String strImageP1 = "";
	String strImageP2 = "";
	String strImageP1SemLineBreak = "";
	String strImageP2SemLineBreak = "";

	String pergunta = comp.getPergunta(SiteHost.getSiteHostPerHost(request.getServerName()), locale);
	String schema = "BlogPosting";
	if (comp.getSchemaMain() != null && comp.getSchemaExtend() != null) {
		schema = comp.getSchemaMain() + (!comp.getSchemaExtend().equals("")?"/" + comp.getSchemaExtend():"");
	}
	String keywords = "";
	String keys[] = pergunta.replace("  ", " ").replace("?", "").split(" ");
	for (int z = 0; z < keys.length; z++) {
		keywords += keys[z] + ", ";
	}
	keywords = keywords.substring(0, keywords.length() - 2).trim();


	log.info("comp.getTipoComparacao() = " + comp.getTipoComparacao());
	if (comp.getTipoComparacao() == TipoComparacao.TIPO_COMPARACAO_2_PRODUTOS) {
		p1 = d.getProduto(comp.getListProdutosComp().get(0));
		p2 = d.getProduto(comp.getListProdutosComp().get(1));

		if (p1 == null) {
			log.info("p1 = null");
		}

		if (p2 == null) {
			log.info("p2 = null");
		}

		//long[] numVotosTotais = comp.getNumVotos();
		long[] numVotosAnonimos = comp.getNumVotosAnonimos(uAnonimo.getId());
		listVotosP1 = comp.getListVotoComparacaoProdutos(p1.getId());
		numVotosP1 = listVotosP1.size();
		numVotosAnonimoP1 = numVotosAnonimos[0];
		numComentsP1 = comp.getNumComentariosValidos(p1.getId()); 

		log.info("numVotosAnonimos primeira parte ");

		listVotosP2 = comp.getListVotoComparacaoProdutos(p2.getId());
		numVotosP2 = listVotosP2.size();
		numVotosAnonimoP2 = numVotosAnonimos[1];
		numComentsP2 = comp.getNumComentariosValidos(p2.getId());

		System.out.println("Comp id:" + comp.getId());
	}
%>

<%!
	public String getRespostas(long idComparacao, long idVoto, long idProd, String pathId, ArrayList<Resposta> listResposta, int margin, String divId) {
		String result = "";//listResposta.size() + " resposta(s)";
		for (int j = 0; j < listResposta.size(); j++) {
			Resposta resp = listResposta.get(j);

			String newPathId = pathId.trim().equals("")?String.valueOf(resp.getId()):(pathId + "-" + resp.getId());
			//result += "<br>";
			result += "<div style=\"width: 100%; height: 2px;background-color: white;\"></div>";
			result += "<div id=\"" + divId + "_" + j + "\" style=\"width: 100%;\">";
				//result += "<P class=\"fontPadrao2\" style=\"margin-left: " + margin + "px;\"><img src=\"" + resp.getStrIconeUsuario() + "\">&nbsp;"  + resp.getNomeUsuario() + "</P>";
				result += "<P class=\"fontPadrao2 boxRounded break-word\" style=\"margin-left: " + margin + "px; margin-right: 2px; color: white;\">";
					result += "<img src=\"" + resp.getStrIconeUsuario() + "\">&nbsp;<span style=\"color: gold;\">" + resp.getNomeUsuario() + "</span>";
					result += "<br>";
					result += "<br>";
					result += "<span style=\"padding-left: 54px;\">" + resp.getComentario() + "</span>";
					result += "<br>";
					result += "<button class=\"btnMoreResults\" style=\"font-size: 9px;\" onclick=\"responderVoto(" + idComparacao + "," + idVoto + ", " + idProd + ", '" + newPathId + "', " + resp.getIdUsuario() + ", '" + resp.getNomeUsuario() + "', '" + resp.getComentario() + "', " + (margin + 20) + ", '" + divId + "_" + j + "');\">Responder</button>";
				result += "</P>";
			result += "</div>";
			//result += "Resposta_" + j + ": Id: " + resp.getId();

			if (resp.getListResposta() != null && resp.getListResposta().size() > 0) {
				result += getRespostas(idComparacao, idVoto, idProd, newPathId, resp.getListResposta(), margin + 20, divId + "_" + j);
			}
		}
		return result;
	}
%>

<!DOCTYPE html>
<html lang="en">
	<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <%=namespace%>: http://ogp.me/ns/fb/<%=namespace%>#">
		<% if ((p1 != null) && (p2 != null)) { %>
		
			<% System.out.println("Teste 1"); %>

			<% //strImageP1 = (p1.getListEnderecoFoto() != null?p1.getListEnderecoFoto().get(0): (p1.getListImageBlob() != null?"data:image/png;base64, " + Base64.encodeToString(p1.getListImageBlob().get(0).getBytes(), true): "")); %>
			<% //strImageP2 = (p2.getListEnderecoFoto() != null?p2.getListEnderecoFoto().get(0): (p2.getListImageBlob() != null?"data:image/png;base64, " + Base64.encodeToString(p2.getListImageBlob().get(0).getBytes(), true): "")); %>
			<% strImageP1 = (p1.getListEnderecoFoto() != null?p1.getListEnderecoFoto().get(0): "/images/boneco.png"); %>
			<% strImageP2 = (p2.getListEnderecoFoto() != null?p2.getListEnderecoFoto().get(0): "/images/boneco.png"); %>
			<% strImageP1SemLineBreak = strImageP1.replaceAll("\r\n", ""); %>
			<% strImageP2SemLineBreak = strImageP2.replaceAll("\r\n", ""); %>

			<%
				if (strImageP1SemLineBreak.length() > 1 && strImageP1SemLineBreak.indexOf("/") == 0) {
					strImageP1SemLineBreak = "http://" + site.getHost() + strImageP1SemLineBreak; 
				}

				if (strImageP2SemLineBreak.length() > 1 && strImageP2SemLineBreak.indexOf("/") == 0) {
					strImageP2SemLineBreak = "http://" + site.getHost() + strImageP2SemLineBreak; 
				}
			%>

			<% System.out.println("Teste 2 - comp.getLinkImgVersus = [" + comp.getLinkImageVersus() + "]"); %>
			<meta property="fb:app_id"      content="<%=app_id%>" /> 
			<meta property="og:type"        content="<%=namespace%>:comparison" /> 
			<meta property="og:url"         content="http://<%=site.getHost().replace("localhost", "localhost:8888")%>/<%=link%>" />
			<meta property="og:title"       content="<%=comp.getPergunta(site, locale)%>" /> 
			<meta property="og:image"		content="<%=((comp.getLinkImageVersus() != null && !comp.getLinkImageVersus().equals(""))?("http://" + site.getHost().replace("localhost", "localhost:8888") + comp.getLinkImageVersus()):strImageP1SemLineBreak)%>" />
			<meta property="og:description" content="<%=Util.getConstant("Clique e deixe seu voto / opinião sobre ", locale)%><%=comp.getPergunta(site, locale)%>" />
		<% } %>
		<title><%=pergunta%></title>
		<meta charset="utf-8">
	    <meta name="author" content="Qual o Melhor Team">
		<meta name="title" content="<%=pergunta%>">
		<meta name="description" content="<%=(Util.getConstant("Saiba sobre", locale) + " " + pergunta + " " + Util.getConstant(". Vote deixe sua opinião a respeito.", locale))%>">
		<meta http-equiv="expires" content="-1">
		<meta http-equiv="pragma" content="no-cache" />
		<meta http-equiv="VW96.OBJECTTYPE" content="Internet">
		<meta name="rating" content="webmaster">
		<meta name="revisit-after" content="2 days">
		
		
	    <meta name="keywords" content="<%=Util.getConstant("qual o melhor", locale)%>, <%=Util.getConstant("comparação", locale)%>, <%=keywords%>">
	    <!-- quem, qual, melhor, comparacao, pessoas, produto, habilidade, tecnica, forma, fazer, metodo, beleza, capacidade -->
	    <meta name="robots" content="index,follow">
	    <meta http-equiv="content-language" content="<%=locale.substring(0, 2)%>">
	    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	    <meta name="gwt:property" content="locale=<%=locale%>">
		<meta name="reply-to" content="admin@<%=request.getServerName().replace("www.", "")%>">
		<meta http-equiv="X-UA-Compatible" content="IE=9" >

		<!--[if lt IE 9]>
			<script src="/javascript/html5shiv.js"></script>
		<![endif]-->

	    <link type="text/css" rel="stylesheet" href="/stylesheets/qualomelhor.css">
	    <link type="text/css" rel="stylesheet" href="/stylesheets/queryLoader.css" />

		<!--[if IE 6]>
			<script src="/javascript/DD_belatedPNG.js"></script>
			<script>
	  			/* EXAMPLE */
  				DD_belatedPNG.fix('.png_bg');
  
		  		/* string argument can be any CSS selector */
  				/* .png_bg example is unnecessary */
  				/* change it to what suits you! */
			</script>
		<![endif]--> 
		<script type="text/javascript">
			<%@ include file="/javascript/qualomelhor.js" %>
		</script>

		<script type="text/javascript" src="/javascript/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="/javascript/jquery.serialScroll-1.2.2-min.js"></script>
		<script type="text/javascript" src="/javascript/jquery.scrollTo-1.4.2-min.js"></script>
		<script type="text/javascript" src="/javascript/jquery.queryloader2.js"></script>

		<script type="text/javascript">
			function inicio() {
				//alert("inicio ok...");
				resize();
				//alert("resize ok...");
				window.onresize = resize;
				//alert("on resize ok...");
				window.startScroll();
				//alert("start scroll ok...");
				setBackground("aguardaBackLoaded");
			}
			
			<% System.out.println("Teste 3"); %>

			function aguardaBackLoaded() {
				//alert("aguardando...");
				if (window.verificaBackgroundCarregado_j && window.verificaBackgroundCarregado_j()) {
					//alert("dentro do aguardabackloaded...");
					//window.setVisible_j(true);
					//alert("left = " + $("#playn-root").offset().left);
					window.setSize_j(450, 250);
					window.setPosicaoBoneco_j(50, 60);
					//window.moveBackground_j($("#playn-root").offset().left, $("#playn-root").offset().top);
					window.setVisible_j(true);
					window.setAvatar_j("<%=comp.getAvatar().toString()%>", true);
					$("#divAbaixoTitulo").css("visibility", "visible");
					<% if (novaComparacao) { %>
						window.carregaSequenciaExpressao_j("Aponta-Rede-Social", false);
						window.sendMsgText_j("<%=Util.getConstant("Sua comparação foi criada! Compartilhe nas redes sociais e tenha a resposta rapidamente!", locale)%>");
					<% } else if (jaVotou) { %>
						window.carregaSequenciaExpressao_j("Aponta-Rede-Social", false);
						window.sendMsgText_j("<%=Util.getConstant("Compartilhe esta comparação na sua rede social e saiba rapidamente o que seus amigos acham!", locale)%>");
					<% } else { %>
						window.carregaSequenciaExpressao_j("Aponta-Lados", false);
						window.sendMsgText_j("<%=(comp.getPergunta(site, locale) + " " + Util.getConstant("Vote e deixe seu comentário!", locale))%>");
					<% } %>
					window.iniciaComportamentoAleatorio_j(2000, 10);
					<% if (voto != null) { %>
						<% if (voto.equals("1")) { %>
							votarProduto(<%=idComparacao%>, <%=p1.getId()%>, "<%=strImageP1SemLineBreak%>", "<%=p1.getNomeProduto()%>", "<%=comp.getPergunta(site, locale)%>");
						<% } else { %>
							votarProduto(<%=idComparacao%>, <%=p2.getId()%>, "<%=strImageP2SemLineBreak%>", "<%=p2.getNomeProduto()%>", "<%=comp.getPergunta(site, locale)%>");
						<% } %>
					<% } %>
					//alert("moveu!");
				} else {
					setTimeout("aguardaBackLoaded();", 200);
				}
			}

			function setBackground(func) {
				//alert("func = " + func);
				setGameBackground("<%=backgroundUrl%>", func);
			}

			function setGameBackground(imageUrl, func) {
				//alert("imageUrl = " + imageUrl);
				if (window.verificaGameCarregado_j && window.verificaGameCarregado_j()) {
						//alert("verificaGameCarregado_j carregado.." + window.verificaGameCarregado_j());
						window.setBackgroundAndMove_j(imageUrl, $("#playn-root").offset().left, $("#playn-root").offset().top);
						//alert("setBackgroundAndMove ok.." + func);
						var fn = window[func];
						//alert("fn = " + fn);
						if (typeof fn === "function") {
							fn();
						}
						//setTimeout(func, 1000);
						//alert("executou!");
				} else {
					setTimeout("setGameBackground('" + imageUrl + "', '" + func + "');", 2000);
				}
			}
			
		</script>

		<script>		
			pagina = "detalhecomparacao";
		</script>

		<% System.out.println("Teste 4"); %>

		<script type="text/javascript">		
			var userImg = "<%=userImg%>";
			var opacityBloqueio = 0;
			var opacitySolido = 0;
			var div = null;
			var divSolido = null;
			window.numProdsP1 = <%=listVotosP1.size()%>;
			window.numProdsP2 = <%=listVotosP2.size()%>;
			window.numComentsP1 = <%=numComentsP1%>;
			window.numComentsP2 = <%=numComentsP2%>;
			window.numVotosP1 = <%=numVotosP1%>;
			window.numVotosP2 = <%=numVotosP2%>;
			var jaVotou = <%=jaVotou%>;
			var votoAtualId = <%=((votoAtual != null)?votoAtual.getId():"null")%>;
			var userAnonimo = <%=userAnonimo%>;

			function votarProduto(idComparacao, idProduto, imgPath, nomeProduto, perguntaBase) {
				//alert("carregando form.. idComparacao: " + idComparacao + ", produto: " + idProduto + ", imgPath = " + imgPath + ", nomeProduto = " + nomeProduto);
				if (!jaVotou) {
					window.carregaFormVoto_j(<%=u.getId()%>, '<%=u.getNomeUsuario()%>', '<%=userImg%>', idComparacao, idProduto, imgPath, nomeProduto, perguntaBase);
					showDivBloqueio();
				} else {
					if (userAnonimo) {
						window.sendMsgText_j("<%=Util.getConstant("Seu voto já foi computado. Efetue o login para alterar seu voto!", locale)%>");
					} else {
						//alert("carregaFormAlteraVoto");
						if (jaVotou && votoAtualId != null) {
							var coment = "";
							if (document.getElementById("spanComent_" + votoAtualId)) {
								coment = document.getElementById("spanComent_" + votoAtualId).innerHTML;
							}
							//alert("coment = " + coment);
							window.carregaFormAlteraVoto_j(votoAtualId, <%=u.getId()%>, '<%=u.getNomeUsuario()%>', '<%=userImg%>', idComparacao, idProduto, imgPath, nomeProduto, perguntaBase, coment);
							showDivBloqueio();
						} else {
							window.sendMsgText_j("<%=Util.getConstant("Opps.. Você já votou, mas não foi possível localizar seu voto para edição! Lamentamos o inconveniente!", locale)%>");
						}
					}
				}
			}

			<% System.out.println("Teste 5"); %>
			
			function responderVoto(idComparacao, idVoto, idProd, pathId, idUsuarioBase, nomeUsuarioBase, comentBase, margin, divIdDest) {
				//alert("carregando form rezp.. idComparacao: " + idComparacao + ", idVoto: " + idVoto + ", pathId = " + pathId + ", margin =" + margin + ", divIdDest = " + divIdDest);
				//if (idUsuarioBase != <%=u.getId()%>) {
					window.carregaFormResposta_j(<%=u.getId()%>, "<%=u.getNomeUsuario()%>", "<%=userImg%>", idComparacao, idVoto, idProd, pathId, nomeUsuarioBase, comentBase, margin, divIdDest);
					showDivBloqueio();
				//} else {
				//	alert("Quer responder seu próprio voto????");
				//}
			}

			function showDivBloqueio()  {
				div = document.getElementById("divBloqueio");
				divSolido = document.getElementById("divBloqueioSolido");
				opacityBloqueio = 0;
				opacitySolido = 0;
				div.style.opacity = opacityBloqueio;
				divSolido.style.opacity = opacitySolido;
				div.style.display = "block";
				divSolido.style.display = "block";
				setTimeout("animaDivBloqueio()", 10);
			}

			function hideDivBloqueio() {
				document.getElementById("divBloqueio").style.display = "none";
				document.getElementById("divBloqueioSolido").style.display = "none";
			}

			function animaDivBloqueio() {
				//alert("opacityBloqueio = " + opacityBloqueio + ", opacitySolido = " + opacitySolido);
				var reagendar = false;
				if (opacityBloqueio < 0.7) {
					opacityBloqueio += 0.2;
					opacityBloqueio = opacityBloqueio > 0.7? 0.7: opacityBloqueio;
					div.style.opacity = opacityBloqueio;
					reagendar = true;
				}

				if (opacitySolido < 1) {
					opacitySolido += 0.2;
					opacitySolido = opacitySolido > 1? 1: opacitySolido;
					divSolido.style.opacity = opacitySolido;
					reagendar = true;
				}

				if (reagendar) {
					setTimeout("animaDivBloqueio()",50);
				}
			}

			window.copyToClipBoardEvent = function(text) {
				//alert("copyToClipBoardEvent iniciando..");
				window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
				//alert("copyToClipBoardEvent fim");
			}

			window.alteraLinkBlog_js = function(nomeBlog, link) {
				var strTmp = "";
				if (link != "") {
					if (link.indexOf("http://") == -1) {
						link = "http://" + link;
					}
					strTmp += "<%=Util.getConstant("Criado Por", locale)%>: ";
					strTmp += "<a href=\"" + link + "\" target=\"_blank\">";
					if (nomeBlog != null && nomeBlog != "") {
						strTmp += nomeBlog;
					} else {
						strTmp += link;
					}
					strTmp += "</a>";
				}
				//alert("strTmp = " + strTmp);
				$("#divLinkBlog").html(strTmp);
			}

			window.addVoto_js = function(idComparacao, idVoto, idProd, idUsuario, nomeUsuario, strIconeUsuario, coment) {
				<% if (comp.getListProdutosComp() != null && comp.getListProdutosComp().size() > 0) { %>
					// computa o voto somente..
					var prodNum = 1;
					if (idProd == <%=comp.getListProdutosComp().get(0)%>) {
						window.numVotosP1++;
						prodNum = 1;
						$("#valorPlacarP1").text(window.numVotosP1);
					} else {
						window.numVotosP2++;
						prodNum = 2;
						$("#valorPlacarP2").text(window.numVotosP2);
					}
					jaVotou = true;
					votoAtualId = idVoto;
					//alert("ProdNum = " + prodNum);

					if (coment.trim() != "") {
						var $ulProd = null;
						var prodNum = 1;
						if (idProd == <%=comp.getListProdutosComp().get(0)%>) {
							$ulProd = $("#ulSectionsP1");
							window.numComentsP1++;
							prodNum = 1;
						} else {
							$ulProd = $("#ulSectionsP2");
							window.numComentsP2++;
							prodNum = 2;
						}
						//alert("$ulProd = " + $ulProd);

						var strTmp = "<li id=\"liVoto_" + idVoto + "\">";
							strTmp += "<div class=\"boxRounded3 backgroundTransp\" style=\"position: absolute; width:100%; height: 100%; background-color: #E0FFFF;\">";
							strTmp += "</div>";
							strTmp += "<div id=\"divtestP" + prodNum + "_" + idVoto + "\" style=\"position: absolute; width: 350px; height: 100%; overflow: auto;\">";
								strTmp += "<div style=\"width: 100%; height: 2px;\"></div>";
								strTmp += "<P class=\"fontPadrao2 boxRounded break-word\" style=\"margin-left: 2px; margin-right: 2px; color: white;\">";
									strTmp += "<img src=\"" + strIconeUsuario + "\">&nbsp;<span style=\"color: gold;\">" + nomeUsuario + "</span>";
									strTmp += "<br>";
									strTmp += "<br>";
									strTmp += "<span id=\"spanComent_" + idVoto + "\" style=\"padding-left: 54px;\">" + coment + "</span>";
									strTmp += "<br>";
									strTmp += "<button class=\"btnMoreResults\" style=\"font-size: 9px;\" onclick=\"responderVoto(" + idComparacao + ", " + idVoto + ", " + idProd + ", '', " + idUsuario + ", '" + nomeUsuario + "', '" + coment + "', 20,'divtestP" + prodNum + "_" + idVoto + "');\">Responder</button>";
									strTmp += "<br>";
								strTmp += "</P>";
								strTmp += "<div style=\"width: 100%; height: 2px;\"></div>";
							strTmp += "</div>";
						strTmp += "</li>";

						//alert("str = " + strTmp);
						$(strTmp).appendTo($ulProd);
						//$ulProd.append(strTmp);
						//window.startScroll();

						window.moveToLast(prodNum);
						//alert("adicionou a resposta!");
					}

					<% if (u != null && u.getOrigemLogin() == OrigemLogin.FACEBOOK.getSiteOrigem()) { %>
						loginFB(coment, "postVotar");
					<% } else { %>
						if (window.sendMsgText_j) {
							window.carregaSequenciaExpressao_j("Aponta-Rede-Social", false);
							window.sendMsgText_j("<%=Util.getConstant("Voto adicionado! Obrigado por participar! Compartilhe na sua rede social e saiba a opinião dos seus amigos! Compartilhe no seu blog e ganhe um link de volta!", locale)%>");
							hideDivBloqueio();							
							//Carregar o aponta-rede-social
						}
					<% } %>
				<% } %>
				//alert("finalizou o voto!");
			}

			window.alteraVoto_js = function(idComparacao, idVoto, idProd, idUsuario, nomeUsuario, strIconeUsuario, coment) {
				//alert("alteraVoto_js...");
				var prodNum = 1;
				if (idProd == <%=comp.getListProdutosComp().get(0)%>) {
					$("#spanComent_" + idVoto).text(coment);
				} else {
					$("#spanComent_" + idVoto).text(coment);
				}

				if (window.sendMsgText_j) {
					window.carregaSequenciaExpressao_j("Aponta-Rede-Social", false);
					window.sendMsgText_j("<%=Util.getConstant("Voto foi alterado! Obrigado por participar! Compartilhe na sua rede social e saiba a opinião dos seus amigos! Compartilhe no seu blog e ganhe um link de volta!", locale)%>");
					//Carregar o aponta-rede-social
				}
				alert("finalizou o voto!");
			}

			window.deletaVoto_js = function(idVoto, idProd) {
				alert("deletaVoto_js...");
				var prodNum = 1;
				$("#liVoto_" + idVoto).remove();
				if (idProd == <%=comp.getListProdutosComp().get(0)%>) {
					window.numVotosP1--;
					prodNum = 1;
					$("#valorPlacarP1").text(window.numVotosP1);
				} else {
					window.numVotosP2--;
					prodNum = 2;
					$("#valorPlacarP2").text(window.numVotosP2);
				}

				if (window.sendMsgText_j) {
					//window.carregaSequenciaExpressao_j("Aponta-Rede-Social");
					window.sendMsgText_j("<%=Util.getConstant("Seu voto foi deletado! Você pode refazer o seu voto agora! Obrigado por participar!", locale)%>");
					//Carregar o aponta-rede-social
				}
				alert("deletou o voto!");
				jaVotou = false;
			}

			window.addResposta_js = function(idComparacao, idVoto, pathId, idProd, idUsuario, nomeUsuario, strIconeUsuario, coment, margin, divIdDest, idResposta) {
				//alert("addResposta chamado..det1");
				//alert("idComparacao = " + idComparacao);
				//alert("idVoto = " + idVoto);
				//alert("pathId = " + pathId);
				//alert("nomeUsuario = " + nomeUsuario);
				//alert("coment = " + coment);
				//alert("margin = " + margin);
				//alert("divIdDest = " + divIdDest);
				//alert("idResposta = " + idResposta);

				<% if (comp.getListProdutosComp() != null && comp.getListProdutosComp().size() > 0) { %>
					var prodNum = 1;
					if (idProd == <%=comp.getListProdutosComp().get(0)%>) {
						prodNum = 1;
					} else {
						prodNum = 2;
					}
					//alert("prodNum = " + prodNum);
					//alert("addResposta chamado..det2");
					var $divId = $("#" + divIdDest);
					//alert("$divId = " + $divId);
					var strTmp = "";
					strTmp += "<div style=\"width: 100%; height: 2px;background-color: white;\"></div>";
					strTmp += "<div id=\"" + divIdDest + "_" + idResposta + "\" style=\"width: 100%;\">";
					strTmp += "<P class=\"fontPadrao2 boxRounded break-word\" style=\"margin-left: " + margin + "px; margin-right: 2px; color: white;\">";
						strTmp += "<img src=\"" + strIconeUsuario + "\">&nbsp;<span style=\"color: gold;\">" + nomeUsuario + "</span>";
						strTmp += "<br>";
						strTmp += "<br>";
						strTmp += "<span style=\"padding-left: 54px;\">" + coment + "</span>";
						strTmp += "<br><button class=\"btnMoreResults\" style=\"font-size: 9px;\" onclick=\"responderVoto(" + idComparacao + "," + idVoto + ", " + idProd + ", '" + pathId + "', " + idUsuario + ", '" + nomeUsuario + "', '" + coment + "', " + margin + ", '" + (divIdDest + "_" + idResposta) + "');\">Responder</button>";
						strTmp += "<br>";
					strTmp += "</P>";
					strTmp += "</div>";

					//alert("str = " + strTmp);

					$(strTmp).appendTo($divId);
					//alert("scrolling resposta;");
					var $paneTarget = $("#divtestP" + prodNum + "_" + idVoto);
					var $paneDest = $("#" + divIdDest + "_" + idResposta);
					//alert("$paneTarget = " + $paneTarget + " - #divtestP" + prodNum + "_" + idVoto);
					//alert("$paneDest = " + $paneDest + " - #" + divIdDest + "_" + idResposta);
					$paneTarget.scrollTo($paneDest, 700);
					//alert("scroll ok");
					// adiciona a mensagem do boneco
					if (window.sendMsgText_j) {
						window.sendMsgText_j("<%=Util.getConstant("Resposta adicionada. Obrigado por participar! Compartilhe na sua rede social e saiba a opinião dos seus amigos! Compartilhe no seu blog e ganhe um link de volta!", locale)%>");
						window.carregaSequenciaExpressao_j("Aponta-Rede-Social", false);
					}
				<% } %>
			}

			window.moveToLast = function(idProd) {
				if (idProd == 1) {
					$('#tbSectionsP1').trigger( 'goto', [ (window.numComentsP1 - 1) ] );
				} else {
					$('#tbSectionsP2').trigger( 'goto', [ (window.numComentsP2 - 1) ] );
				}
			}

			window.atualizaVoto = function(prodNum, numComentario) {
				//alert("prodNum = " + prodNum + ", numComentario = " + numComentario);

				if (prodNum == 1) {

					var p1Visivel = (window.numComentsP1 > 1)?"visible":"hidden";
					if (window.numComentsP1 > 0) {
						//alert("p1Visivel = " + p1Visivel);
						$("#divHeadComentP1").html("<P class=\"fontPadrao2\" style=\"padding: 2px;\"><%=Util.getConstant("Comentários", locale)%>: <span id=\"divComentAtualP1\" style=\"display:inline;\">1</span>&nbsp;<%=Util.getConstant("de", locale)%>&nbsp;<span id=\"divNumVotosP1\" style=\"display:inline;\">" + window.numComentsP1 + "</span></P>");
						$("#divComentAtualP1").text(new String(numComentario));
						$("#divNumVotosP1").text(new String(window.numComentsP1));

						if (window.numComentsP1 > 1) {
							$("#imgPrevP1").css("visibility", p1Visivel);
							$("#imgNextP1").css("visibility", p1Visivel);
						}
					} else {
						$("#divHeadComentP1").text("<P class=\"fontPadrao2\" style=\"padding: 2px;\"><span style=\"display:inline;\"><%=Util.getConstant("Vote e comente!", locale)%></span></P>");
					}

				} else if (prodNum == 2) {
					var p2Visivel = (window.numComentsP2 > 1)?"visible":"hidden";
					//alert("p2Visivel = " + p2Visivel);

					if (window.numComentsP2 > 0) { // possui comentario?
						var htmlDivHeadComentP2 = "<P class=\"fontPadrao2\" style=\"padding: 2px;\"><%=Util.getConstant("Comentários", locale)%>:<span id=\"divComentAtualP2\" style=\"display:inline;\">1</span>&nbsp;<%=Util.getConstant("de", locale)%>&nbsp;<span id=\"divNumVotosP2\" style=\"display:inline;\">" + window.numComentsP2 + "</span></P>"; 

						$("#divHeadComentP2").html(htmlDivHeadComentP2);
						$("#divComentAtualP2").text(new String(numComentario));
						$("#divNumVotosP2").text(new String(window.numComentsP2));

						if (window.numComentsP2 > 1) {
							$("#imgPrevP2").css("visibility", p2Visivel);
							$("#imgNextP2").css("visibility", p2Visivel);
						}

					} else {
						$("#divHeadComentP2").html("<P class=\"fontPadrao2\" style=\"padding: 2px;\"><span style=\"display:inline;\"><%=Util.getConstant("Vote e comente!", locale)%></span></P>");
					}
				}

				$("#valorPlacarP1").text(window.numVotosP1);
				$("#valorPlacarP2").text(window.numVotosP2);
				//alert("atualizou o numero do comentario");

				//alert("atualizou o voto!");
			}

			window.startScroll = function() {
				//alert("x");

				$.easing.elasout = function(x, t, b, c, d) {
					var s=1.70158;var p=0;var a=c;
					if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
					if (a < Math.abs(c)) { a=c; var s=p/4; }
					else var s = p/(2*Math.PI) * Math.asin (c/a);
					return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
				};

				$('.divprodrot').serialScroll({
					target:'.tbSections',
					items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
					prev:'img.prev',// Selector to the 'prev' button (absolute!, meaning it's relative to the document)
					next:'img.next',// Selector to the 'next' button (absolute too)
					axis:'y',// The default is 'y' scroll on both ways
					duration:300,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
					force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
					lazy:true,
					onBefore:function( e, elem, $pane, $items, pos ){
						 //those arguments with a $ are jqueryfied, elem isn't.
						 //alert("anterior");
						//alert("#tbSections.trigger = " + $('#tbSections').trigger);
						//alert("pane = " + $pane.attr("id"));
						//alert("pos = " + pos);
						//alert("elem = " + elem.attr("id"));
						//alert("e = " + e.attr("id"));

						//var $divId = null;
						if ($pane.attr("id") == "tbSectionsP1") {
							window.atualizaVoto(1, pos + 1);
							//$divId = $("#divComentP1");
						} else {
							window.atualizaVoto(2, pos + 1);
							//$divId = $("#divComentP2");
						}
		
						//var strTmp = new String(pos + 1);
						//$divId.text(strTmp);
		
						e.preventDefault();
						if( this.blur )
							this.blur();
					},
					onAfter:function( elem ){
						//alert("proximo");
						//'this' is the element being scrolled ($pane) not jqueryfied
					}
				});

				//alert("y");
			}

			function postVotar(coment) {
				//alert("vai postar no face");
				FB.api('/me/<%=namespace%>:vote?comparison=http://<%=request.getServerName().replace("localhost", "localhost:8888")%>/fbobject/<%=comp.getPath(site)%>',
		    		'post',
		    		function(response) {
		       			if (!response || response.error) {
		          			//alert('Error occured');
		          			//alert('Response text = ' + response.responseText);
		          			//alert('Response error. text = ' + response.error.responseText);
		          			//alert('Response id = ' + response.id);
		          			//window.location = "/recomendacoes.jsp";
		       				carregaFormErroFB_j("<%=Util.getConstant("Ocorreu um erro ao postar seu voto. Lamentamos o inconveniente.", locale)%>");
		       			} else {
		          			//alert('Cook was successful! Action ID: ' + response.id + " mandar para uma tela que ele possa ver este post no facebook");
		          			if (coment && coment != "") {
		          				postFBComent(response.id, coment, false);
		          			}

		          			if (window.sendMsgText_j) {
								window.carregaSequenciaExpressao_j("Aponta-Rede-Social", false);
								window.sendMsgText_j("<%=Util.getConstant("Voto adicionado! Obrigado por participar! Compartilhe na sua rede social e saiba a opinião dos seus amigos! Compartilhe no seu blog e ganhe um link de volta!", locale)%>");
								//Carregar o aponta-rede-social
								hideDivBloqueio();
							} else {
								carregaFormErroFB_j("<%=Util.getConstant("Voto adicionado! Obrigado por participar! Compartilhe na sua rede social e saiba a opinião dos seus amigos! Compartilhe no seu blog e ganhe um link de volta!", locale)%>");
							}
		          			
		          			//Salva este post na lista de sharesFB_ID
		          			//alert("vai tentar salvar o sharefb id: " + response.id);
		          			salvaFB_ID(response.id);
		       			}
		    		}
				);
			}

			function salvaFB_ID(shareId) {
				//alert("shareId: " + shareId);
				window.salvaShareFBID_j(<%=comp.getId()%>, shareId);
			}

			function postComparar(coment) {
				//alert("vai postar no face");
				var wallPost = {
					name: "<%=comp.getPergunta(site, locale)%>",
					message : "<%=comp.getPergunta(site, locale)%>",
					picture: "<%=((comp.getLinkImageVersus() != null && !comp.getLinkImageVersus().equals(""))?("http://" + request.getServerName().replace("localhost", "localhost:8888") + comp.getLinkImageVersus()):p1.getListEnderecoFoto().get(0))%>",
					link: "http://<%=(site.getHost().replace("localhost", "www.qual-o-melhor.com") + "/" + comp.getPath(site))%>",
					description: "<%=(Util.getConstant("Vote deixe sua opinião a respeito!", locale) + " " + Util.getConstant("Crie suas próprias comparações para promover seu blog ou site!", locale))%>"
				};
				FB.api('/me/feed', 'post', wallPost , function(response) {
					if (!response || response.error) {
						//alert("http://<%=(site.getHost().replace("localhost", "www.qual-o-melhor.com") + "/" + comp.getPath(site))%>");
						window.carregaFormErroFB_j("<%=Util.getConstant("Ocorreu um erro ao postar sua comparação. Lamentamos o inconveniente.", locale)%>" + JSON.stringify(response));
					} else {
						//alert('Post ID: ' + JSON.stringify(response));
						if (coment && coment != "") {
	          				postFBComent(response.id, coment, true);
	          			} else {
	          				//window.location = "/recomendacoes.jsp";
	          				hideDivBloqueio();
	          				window.sendMsgText2_j("<%=Util.getConstant("Esta comparação foi postada no seu facebook! Obrigado por participar!", locale)%>", false);
	          			}
						//alert("vai tentar salvar o sharefb id:" + response.id);
	          			salvaFB_ID(response.id);
					}
				});

				//FB.api('/me/<%=namespace%>:want_to_know?comparison=http://<%=request.getServerName().replace("localhost", "localhost:8888")%>/fbobject/<%=comp.getPath(site)%>',
						//'post',
		    		//function(response) {
						//if (!response || response.error) {
		          			//alert('Error occured: ' + response);
		          			//alert('Error: ' + response.error);
		          			//alert('Response text = ' + response.responseText);
		          			//alert('Response error. text = ' + response.error.responseText);
		          			//alert('Json = ' + JSON.stringify(response));
		          			//alert('Response ID: ' + response.id);

		          			//alert("carregaFormErroFB_j = " + window.carregaFormErroFB_j);
		          			<% if (u != null && u.getAdmin()) { %>
		          				//alert('Alert admin: Json = ' + JSON.stringify(response));
		          				//window.carregaFormErroFB_j("<%=Util.getConstant("Ocorreu um erro ao postar sua comparação: ", locale)%>" + JSON.stringify(response));
		          			<% } else { %>
		          				//window.carregaFormErroFB_j("<%=Util.getConstant("Ocorreu um erro ao postar sua comparação. Lamentamos o inconveniente.", locale)%>" + JSON.stringify(response));
		          			<% } %>
		          			//window.location = "/recomendacoes.jsp";
		          			//} else {
		          			//alert('Cook was successful! Action ID: ' + response.id + " mandar para uma tela que ele possa ver este post no facebook");
		          			//if (coment && coment != "") {
		          				//postFBComent(response.id, coment, true);
		          			//} else {
		          				//window.location = "/recomendacoes.jsp";
		          				//hideDivBloqueio();
		          				//window.sendMsgText2_j("<%=Util.getConstant("Esta comparação foi postada no seu facebook! Obrigado por participar!", locale)%>", false);
		          			//}
		          		//}
		       		//	}
				//);
				
			}

			function postFBComent(actionId, coment, action) {
				//alert("vai postar o comentario!");
				FB.api('/' + actionId + '/comments', 'post', { message: coment }, function(response) {
					if (!response || response.error) {
						//alert('Error occured');
						if (action) {
							carregaFormErroFB_j("<%=Util.getConstant("Ocorreu um erro ao postar o comentário. Lamentamos o inconveniente.", locale)%>");
						}
					} else {
						//alert('Post ID: ' + response.id);
						if (action) {
							//window.location = "/recomendacoes.jsp";
							hideDivBloqueio();
							window.sendMsgText2_j("<%=Util.getConstant("Seu comentário foi incluído no facebook! Obrigado por participar!", locale)%>", false);
						}
					}
				});
			}

			function codeToShare(site, link, compNum, pergunta, idComparacao, nomeBlog, linkBlog) {
				<% boolean permitirLink = false; %>
				<% if (!userAnonimo) { %>
					<% if (comp.getIdUsuario().equals(u.getId()) || (comp.getIdUsuarioLink() != null && comp.getIdUsuarioLink().equals(u.getId())) || comp.getLinkBlog() == null || comp.getLinkBlog().equals("")) { %>
						<% permitirLink = true; %>
					<% } %>
				<% } %>
				//alert("site = " + site);
				//alert("link = " + link);
				//alert("compNum = " + compNum);
				//alert("comp.idUsuarioLInk = <%=comp.getIdUsuarioLink()%>");
				//alert("comp.getLink = <%=comp.getLinkBlog()%>");
				window.carregaFormShareBlog_j(site, link, compNum, pergunta, idComparacao, <%=u.getId()%>, <%=userAnonimo%>, <%=permitirLink%>, nomeBlog, linkBlog);
				showDivBloqueio();
			}

			function codePostTwitter(pergunta, compId) {
				window.carregaFormShareTwitter_j(pergunta);
				showDivBloqueio();
			}

			function carregaPostFB(pergunta) {
				window.carregaFormShareFB_j(pergunta);
				showDivBloqueio();
			}

			window.postarFB_js = function (coment) {
				//alert("Vai postar no face..Coment:" + coment + ".. login primeiro..");
				loginFB(coment, "postComparar");
			}

			window.fbAsyncInit = function() {
			    FB.init({
					appId      : '<%=app_id%>', // App ID
					channelUrl : 'http://<%=request.getServerName()%>/channel.html', // Channel File
		      		status     : true, // check login status
		      		cookie     : true, // enable cookies to allow the server to access the session
		      		xfbml      : true  // parse XFBML
		    	});
			};

			function loginFB(coment, strFuncDestino) {
				var perms = {};
				//if (strFuncDestino == "postVotar") {
					//alert("perms: publish_actions");
					perms = {scope: "publish_actions"};
				//}
				FB.login(function(response) {
					//alert("response.authResponse = " + response.authResponse);
					if (response.authResponse) {
						//alert("response.perms = " + response.perms + " : " +  + JSON.stringify(response));
						if (response.status === "connected") {
							//Logged and Permission Granted
							//alert("logado ok.. vai postar: " + strFuncDestino);
							if (strFuncDestino == "postComparar") {
								postComparar(coment);
							} else if (strFuncDestino == "postVotar") {
								postVotar(coment);
							}	
						} else {
							//Logged and Permisssion NOT Granted
							//alert("erro logar 2 .. Logged and Permisssion NOT Granted: " + JSON.stringify(response));
							carregaFormErroFB_j("<%=Util.getConstant("É necessário autorizar a publicação de ações para para poder postar este evento no seu facebook!", locale)%>" + "\n\n" + JSON.stringify(response));
						}
					} else {
						//alert("erro ao logar.. mostrar a mensagem que precisa estar logado para postar");
						//alert("erro logar 1.. authResponse null");
						carregaFormErroFB_j("<%=Util.getConstant("É necessário autorizar o aplicativo para poder postar este evento no facebook!", locale)%>" + "\n\n" + JSON.stringify(response));
					}
				}, perms);

				//alert("loginFB...");
				//alert("FB.getLoginStatus = " + FB.getLoginStatus);
				//FB.getLoginStatus(function(response) {
					//alert("pegando o login fb = " + response);
					//manipulaLogin(response, coment, strFuncDestino);
				//});

				//alert("dentro do login FB = " + FB.getLoginStatus);
			}

			function manipulaLogin(response, coment, strFuncDestino) {
				//alert("response = ");
				//alert("response.status = " + response.status);
				if (response.status === "connected") {
					//alert("conectado no facebook e autorizado!");
					//alert("coment = " + coment);
					if (strFuncDestino == "postComparar") {
						postComparar(coment);
					} else if (strFuncDestino == "postVotar") {
						postVotar(coment);
					}

				} else if (response.status === "not_authorized") {
					alert("logado no facebook mas não autorizado no app. Tentando logar novamente!");
					if (strFuncDestino == "postComparar") {
						FB.login(function(response) {
							if (response.authResponse) {
								postComparar(coment);
							} else {
								//alert("erro ao logar.. mostrar a mensagem que precisa estar logado para postar");
								carregaFormErroFB_j("<%=Util.getConstant("É necessário autorizar o aplicativo para poder postar este evento no facebook!", locale)%>");
							}
						}, {scope: "publish_actions"});
					}

				} else {
					// the user isn't logged in to Facebook.
					alert("usuario não logado no facebook: Erro.. devolver a mensagem que eh necessario logar no face");
					if (strFuncDestino == "postComparar") {
						FB.login(function(response) {
							if (response.authResponse) {
								postComparar(coment);
							} else {
								//alert("erro ao logar.. mostrar a mensagem que precisa estar logado para postar");
								carregaFormErroFB_j("<%=Util.getConstant("É necessário estar logado no facebook para para poder postar este evento!", locale)%>");
							}
						}, {scope: "publish_actions"});
					}
				}
			}

		</script>

		<script type="text/javascript">

			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-36017337-1']);
			_gaq.push(['_setDomainName', 'which-is-better.net']);
			_gaq.push(['_setAllowLinker', true]);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  			})();

		</script>

		<style type="text/css">
			ul, li {
				list-style:none;
			}

			.next, .prev {
				cursor:pointer;
			}

			.divprodrot {
				position:relative;
				height:100%;
				width:404px;
			}

				.divprodrot div .prev {
					right:95px;
				}
				.divprodrot div .next {
					right:55px;
				}

			.tbSections {
				position:relative;
				overflow:hidden;
				width:350px;
				height:300px;
				clear:left;
				left: 0px;
			}

				.tbSections ul {
					width:350px;		
				}
				
					.tbSections li {
						float:left;
						height: 300px;
						width: 98%;
					}
						
						.tbSections div {
							position: relative;
							width:340px;
						}

		</style>

	</head>

	<% System.out.println("Teste 5 - body"); %>

	<body id="mybody" style="width: 100%; background-image: url('<%=backgroundUrl%>');" onload="inicio();" itemscope itemtype="http://schema.org/<%=schema%>">

		<div id="fb-root"></div>
		<script type="text/javascript">
			// Load the SDK Asynchronously
			(function(d){
				var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
				js = d.createElement('script'); js.id = id; js.async = true;
				js.src = "//connect.facebook.net/en_US/all.js";
				d.getElementsByTagName('head')[0].appendChild(js);
			}(document));
		</script>

		<header id="divHeader">
			<%@ include file="titulo.jsp" %>
			<% ArrayList<String> listCatPais = new ArrayList<String>(0);%>
			<% ArrayList<String> listCatLinks = new ArrayList<String>(0);%>
			<% Categoria catP1 = d.getCategoria(p1.getIdCategoria()); %>
			<% listCatPais.add(catP1.getNomeCategoria(locale)); %>
			<% listCatLinks.add(catP1.getPathCategoria(locale)); %>

			<% Categoria catP2 = d.getCategoria(p2.getIdCategoria()); %>
			<% String strCatP2 = catP2.getNomeCategoria(locale); %>
			<% if (!listCatPais.contains(strCatP2)) { %>
				<% listCatPais.add(strCatP2); %>
				<% listCatLinks.add(catP2.getPathCategoria(locale)); %>
			<% } %>
			<nav style="position:absolute; height: 60px;">
				<div style="position:relative; top:50%; height:60px; margin-top:-30px;">
				<% for (int i = 0; i < listCatPais.size(); i++) { %>
					<% String s = listCatPais.get(i); %>
					<% String links = listCatLinks.get(i); %>
					<span class="fontTexto5 linkSemFormat" style="font-size: 26px;"><a href="<%=links%>" itemprop="articleSection"><%=s%></a></span>
				<% } %>
				</div>
			</nav>
		</header>

		<% System.out.println("Teste 6"); %>
		<div id="divAbaixoTitulo" style="visibility: hidden;">

			<section id="divConteudo">

				<!-- Compartilhar no centro / topo -->
 
 				<div style="position: relative; top: 0px; margin: 0px auto; text-align: center;">
 					<h1>
						<span id="tituloPergunta" class="fontTexto2" itemprop="articleBody"><%=pergunta%>?</span>
					</h1>
				</div>
				<P id="divLinkBlog" class="fontTexto5" style="position: absolute; top: 36px; text-align: left; font-size: 14px;">
				<% if (comp.getLinkBlog() != null && !comp.getLinkBlog().equals("")) { %>
					<%=Util.getConstant("Criado Por", locale)%>:
					<% String linkComp = comp.getLinkBlog(); %>
					<% if (linkComp.indexOf("http://") == -1) { %>
						<% linkComp = "http://" + linkComp; %>
					<% } %>
					<a href="<%=linkComp%>" target="_blank">
						<% if (comp.getNomeBlog() != null && !comp.getNomeBlog().equals("")) { %>
							<%=comp.getNomeBlog()%>
						<% } else { %>
							<%=linkComp%>
						<% } %>
					</a>
				<% } %>
				</P>

				<div id="divComparacao">

					<% if (comp.getTipoComparacao() == TipoComparacao.TIPO_COMPARACAO_2_PRODUTOS) { %>

						<div id="divPlacar" style="position: absolute; top: 300px; width: 96%; height: 70px; margin: 0px 2%;">
							<div id="divSubPlacar" style="position: relative; width: 300px; height: 100%; margin: 0px auto;">
								<div class="backgroundTransp boxRounded3" style="width:100%; height: 100%; background-color: #E0FFFF;">
								</div>
								<div id="divPlacarProd1" class="fontPlacar" style="position: relative; width: 50px; height: 100%; float: left;">
									<span id="valorPlacarP1"><%=numVotosP1%></span>
								</div>

								<P class="divCenter fontPlacar" style="position: absolute; width: 100%; text-align: center;">
									x
								</P>

								<div id="divPlacarProd2" class="fontPlacar" style="position: relative; width: 50px; height: 100%; float: right; text-align: right;">
									<span id="valorPlacarP2"><%=numVotosP2%></span>
								</div>
							</div>
						</div>

						<div id="divPlacarAnonimo" style="position: absolute; top: 374px; width: 96%; height: 22px; margin: 0px 2%;">
							<div id="divSubPlacarTitulo" style="position: relative; width: 100px; height: 18px; margin: 0px auto;">
								<div class="backgroundTransp boxRounded5_Top" style="width:100%; height: 100%; background-color: #E0FFFF;">
								</div>
								<div style="position: relative; font-size: 12px; font-style: tahoma; text-align: center; line-height: 18px;">
									<span><%=Util.getConstant("votos anonimos", locale)%></span>
								</div>
							</div>
							<div id="divSubPlacar" style="position: relative; width: 100px; height: 100%; margin: 0px auto;">
								<div class="backgroundTransp boxRounded5_Bottom" style="width:100%; height: 100%; background-color: #E0FFFF;">
								</div>
								<div id="divPlacarProd1" class="fontPlacarAnonimo" style="position: relative; width: 20px; height: 100%; float: left;">
									<span id="valorPlacarP1"><%=numVotosAnonimoP1%></span>
								</div>

								<P class="divCenter fontPlacarAnonimo" style="position: absolute; width: 100%; text-align: center;">
									x
								</P>

								<div id="divPlacarProd2" class="fontPlacarAnonimo" style="position: relative; width: 20px; height: 100%; float: right; text-align: right;">
									<span id="valorPlacarP2"><%=numVotosAnonimoP2%></span>
								</div>
							</div>							
						</div>

						<div id="divPlayN" style="position: absolute; top: 50px; width: 96%; height: 250px; margin: 0px 2%;">
							<div style="position: relative; width: 450px; height: 100%; margin: 0px auto;">

								<div id="playn-root" style="position: absolute; top: 0px; left:0px; width: 450px; height: 250px; margin: 0px; padding: 0px; background-color: green;">
								</div>

							</div>
						</div>

						<div style="position: relative; width: 96%; height: 254px; top: 46px; margin: 0px 2%; overflow: hidden;">
							<% if (p1 != null) { %>
								<div id="divProd1" style="position: relative; width: 350px; height: 90%; float: left;" itemscope itemtype="http://schema.org/<%=((p1.getSchema() == null || p1.getSchema().equals(""))?"Thing":p1.getSchema())%>">
									<div class="backgroundTransp" style="width:100%; height: 100%; background-color: #E0FFFF;">
									</div>
									<div style="width: 100%; float: left;">
										<div style="width: 100%; height: 2px; background-color: white;"></div>
										<P class="fontTexto1" style="width:100%; background-color: white;" itemprop="name"><%=p1.getNomeProduto()%></P>
										<div style="width: 100%; height: 2px; background-color: white;"></div>
									</div>
									<div style="width: 200px; height: 100%; float: left;">
										<P><img src="<%=strImageP1%>" style="width: 200px; height: 200px;" itemprop="image" /></P>
									</div>
									<div style="width: 150px; height: 90%; float: right;">
										<div style="position:relative; height: 100%;">
											<div style="position:absolute; top:50%; width:100%; height:24px; margin-top:-12px;">
												<div style="position: relative; width:130px; margin: 0px auto;">
													<button class="btnMoreResults" style="width:100%;" onclick="votarProduto(<%=comp.getId()%>, <%=p1.getId()%>, '<%=strImageP1SemLineBreak%>', '<%=p1.getNomeProduto()%>', '<%=comp.getPergunta(site, locale)%>');"><%=Util.getConstant("Votar neste", locale)%></button>
												</div>
											</div>
										</div>
									</div>
								</div>
							<% } %>

							<% if (p2 != null) { %>
								<div id="divProd2" style="position: relative; width: 350px; height: 90%; float: right;" itemscope itemtype="http://schema.org/<%=((p1.getSchema() == null || p1.getSchema().equals(""))?"Thing":p1.getSchema())%>">
									<div class="backgroundTransp" style="width:100%; height: 100%; background-color: #E0FFFF;">
									</div>
									<div style="width: 100%; float: left;">
										<div style="width: 100%; height: 2px; background-color: white;"></div>
										<P class="fontTexto1" style="text-align: right; width: 100%; background-color: white;" itemprop="name"><%=p2.getNomeProduto()%></P>
										<div style="width: 100%; height: 2px; background-color: white;"></div>
									</div>
									<div style="width: 150px; height: 90%; float: left;">
										<div style="position:relative; height: 100%;">
											<div style="position:absolute; top:50%; width: 100%; height:24px; margin-top:-12px;">
												<div style="position: relative; width:130px; margin: 0px auto;">
													<button class="btnMoreResults" style="width:100%;" onclick="votarProduto(<%=comp.getId()%>, <%=p2.getId()%>, '<%=strImageP2SemLineBreak%>', '<%=p2.getNomeProduto()%>', '<%=comp.getPergunta(site, locale)%>');"><%=Util.getConstant("Votar neste", locale)%></button>
												</div>
											</div>
										</div>
									</div>
									<div style="width: 200px; float: right;">
										<P><img src="<%=strImageP2%>" style="width: 200px; height: 200px;" itemprop="image" /></P>
									</div>
								</div>
							<% } %>
						</div>

						<!-- Div para as mensagens a favor e contra -->
						<div style="position: relative; width: 96%; height: 320px; margin: 25px 2%; overflow: hidden;">
							<% if (p1 != null) { %>
								<% //if (numVotosP1 > 0) { %>
									<div id="divMsgProd1" style="position: relative; width: 350px; height: 100%; float: left;">
										<div style="width: 350px; height: 320px; float: left;">
											<div class="divprodrot" style="position: relative;">
												<div id="divHeadComentP1" style="position: relative; width: 270px; float: left;">
													<% if (numComentsP1 > 0) { %>
														<P class="fontPadrao2" style="padding: 2px;"><%=Util.getConstant("Comentários", locale)%>: <span id="divComentP1" style="display:inline;">1</span> de <span id="divNumVotosP1" style="display:inline;"><%=numComentsP1%></span></P>
													<% } else { %>
														<P class="fontPadrao2" style="padding: 2px;"><span style="display:inline;"><%=Util.getConstant("Vote e comente!", locale)%></span></P>
													<% } %>
												</div>
												<div style="position: relative; width: 80px; float: left;">
													<img id="imgPrevP1" class="prev" style="visibility: <%=(numComentsP1 > 1?"visible":"hidden")%>;" src="/images/seta esq.png" alt="prev" width="36" height="20" />
													<img id="imgNextP1" class="next" style="visibility: <%=(numComentsP1 > 1?"visible":"hidden")%>;" src="/images/seta dir.png" alt="next" width="36" height="20" />
												</div>

												<div class="tbSections" id="tbSectionsP1">
													<ul id="ulSectionsP1">
														<% for (VotoComparacaoProduto v1: listVotosP1) { %>
															<% if (!v1.getComentario().trim().equals("")) { %>
																<li id="liVoto_<%=v1.getId()%>">
																	<div class="boxRounded3 backgroundTransp" style="position: absolute; width:100%; height: 100%; background-color: #E0FFFF;">
																	</div>
																	<div id="divtestP1_<%=v1.getId()%>" style="position: absolute; width: 350px; height: 100%; overflow: auto;" itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
																		<div style="width: 100%; height: 2px;"></div>
																		<P class="fontPadrao2 boxRounded break-word" style="margin-left: 2px; margin-right: 2px; color: white;">
																			<img src="<%=v1.getStrIconeUsuario()%>">&nbsp;<span style="color: gold;" itemprop="creator" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><%=v1.getNomeUsuario()%></span></span>
																			<br>
																			<br>
																			<% if (u.getAdmin()) { %>
																				<span id="spanComent_<%=v1.getId()%>" style="padding-left: 54px;"><%=(v1.getComentario()  + " - " + v1.getIpUser())%></span>
																			<% } else { %>
																				<span id="spanComent_<%=v1.getId()%>" style="padding-left: 54px;" itemprop="commentText"><%=v1.getComentario()%></span>
																			<% } %>
																			<br>
																			<button class="btnMoreResults" style="font-size: 9px;" onclick="responderVoto(<%=comp.getId()%>, <%=v1.getId()%>, <%=v1.getIdProduto()%>, '', <%=v1.getIdUsuario()%>, '<%=v1.getNomeUsuario()%>', '<%=v1.getComentario()%>', 0, 'divtestP1_<%=v1.getId()%>');">Responder</button>
																		</P>

																		<% if (v1.getListResposta() != null && v1.getListResposta().size() > 0) { %>
																			<%=getRespostas(comp.getId(), v1.getId(), v1.getIdProduto(), "", v1.getListResposta(), 20, "divtest_idV" + v1.getId()) %>
																		<% } %>
																		<div style="width: 100%; height: 2px;"></div>
																	</div>
																</li>
															<% } %>
														<% } %>
													</ul>
												</div>
												<!-- 
												<img class="prev" src="/images/prev.gif" alt="prev" width="42" height="53" />								 
												<img class="next" src="/images/next.gif" alt="next" width="42" height="53" />
												-->
											</div>
										</div>
									</div>
								<% //} %>
							<% } %>

							<% if (p2 != null) { %>
								<% //if (numVotosP2 > 0) { %>
									<div id="divMsgProd2" style="position: relative; width: 350px; height: 100%; float: right;">
										<div style="width: 350px; height: 320px; float: left;">
											<div class="divprodrot" style="position: relative;">
												<div id="divHeadComentP2" style="position: relative; width: 270px; float: left;">
													<% if (numComentsP2 > 0) { %>
														<P class="fontPadrao2" style="padding: 2px;"><%=Util.getConstant("Comentários", locale)%>: <span id="divComentP2" style="display:inline;">1</span> de <span id="divNumVotosP2" style="display:inline;"><%=numComentsP2%></span></P>
													<% } else { %>
														<P class="fontPadrao2" style="padding: 2px;"><span style="display:inline;"><%=Util.getConstant("Vote e comente!", locale)%></span></P>
													<% } %>
												</div>
												<div style="position: relative; width: 80px; float: left;"> 
													<img id="imgPrevP2" class="prev" style="visibility: <%=(numComentsP2 > 1?"visible":"hidden")%>;" src="/images/seta esq.png" alt="prev" width="36" height="20" />
													<img id="imgNextP2" class="next" style="visibility: <%=(numComentsP2 > 1?"visible":"hidden")%>;" src="/images/seta dir.png" alt="next" width="36" height="20" />
												</div>

												<div class="tbSections" id="tbSectionsP2" itemscope itemtype="http://schema.org/Comment">
													<ul id="ulSectionsP2">
														<% for (VotoComparacaoProduto v2: listVotosP2) { %>
															<% if (!v2.getComentario().trim().equals("")) { %>
																<li id="liVoto_<%=v2.getId()%>">
																	<div class="boxRounded3 backgroundTransp" style="position: absolute; width:100%; height: 100%; background-color: #E0FFFF;">
																	</div>
																	<div id="divtestP2_<%=v2.getId()%>" style="position: absolute; width: 350px; height: 100%; overflow: auto;"  itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
																		<div style="width: 100%; height: 2px;"></div>
																		<P class="fontPadrao2 boxRounded break-word" style="margin-left: 2px; margin-right: 2px; color: white;">															
																			<img src="<%=v2.getStrIconeUsuario()%>">&nbsp;<span style="color: gold;" itemprop="creator" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><%=v2.getNomeUsuario()%></span></span>
																			<br>
																			<br>
																			<% if (u.getAdmin()) { %>
																				<span id="spanComent_<%=v2.getId()%>" style="padding-left: 54px;"><%=(v2.getComentario() + " - " + v2.getIpUser())%></span>
																			<% } else { %>
																				<span id="spanComent_<%=v2.getId()%>" style="padding-left: 54px;" itemprop="commentText"><%=v2.getComentario()%></span>
																			<% } %>
																			<br>
																			<button class="btnMoreResults" style="font-size: 9px;" onclick="responderVoto(<%=comp.getId()%>, <%=v2.getId()%>, <%=v2.getIdProduto()%>, '', <%=v2.getIdUsuario()%>, '<%=v2.getNomeUsuario()%>', '<%=v2.getComentario()%>', 0, 'divtestP2_<%=v2.getId()%>');">Responder</button>
																		</P>
																		<% if (v2.getListResposta() != null && v2.getListResposta().size() > 0) { %>
																			<%=getRespostas(comp.getId(), v2.getId(), v2.getIdProduto(), "", v2.getListResposta(), 20, "divtest_idV" + v2.getId())%>
																		<% } %>
																		<div style="width: 100%; height: 2px;"></div>
																	</div>
																</li>
															<% } %>
														<% } %>
													</ul>
												</div>
												<!--
												<img class="prev" src="/images/prev.gif" alt="prev" width="42" height="53" />								 
												<img class="next" src="/images/next.gif" alt="next" width="42" height="53" />
												-->
											</div>
										</div>
									</div>
								<% //} %>
							<% } %>
						</div>

						<div id="divCompartilhar"  style="position: absolute; top: 274px; left: 780px; width: 78px; height: 26px; margin: 0px auto;">
							<div style="float: left;">	
								<button class="faceButton" onclick="carregaPostFB('<%=comp.getPergunta(site, locale)%>');"></button>
							</div>
							<div style="float: left;">
								<button class="twitterButton" onclick="codePostTwitter('<%=comp.getPergunta(site, locale)%>', '<%=comp.getId()%>');"></button>
							</div>
							<div style="float: left;">
								<button class="blogButton" onclick="codeToShare('<%=site.getHost().replaceAll("localhost", "localhost:8888")%>', '<%=comp.getPath(site)%>', <%=comp.getId()%>, '<%=comp.getPergunta(site, locale)%>', '<%=comp.getId()%>', '<%=comp.getNomeBlog()%>', '<%=comp.getLinkBlog()%>');"></button>
							</div>
						</div>

					<!-- 
						<div style="position: relative; width: 200px; margin: 0px auto;">
							<input class="btnComandoPadrao divCenter" type="button" value="criar propriedade">
						</div>

						<div id="divPropriedades" style="position: relative; width: 600px; height: 200px; margin: 0px auto; background-color: white;">

							Fazer o merge das propriedades e tentar marcar o que e melhor em qual
							<% //for (int i = 0; i < p1.getMapPropriedades().size(); i++) { %>
								<%//=p1.getMapPropriedades() %>
							<% //} %>

							<%// if (p1.getMapNotaPropriedade() != null) { %>
								<%// for (int i = 0; i < p1.getMapNotaPropriedade().size(); i++) { %>
									<%//=p1.getMapNotaPropriedade().get(i).getNota() %>
								<%// } %>
							<%// } %>
						</div>

					-->

					<% } // end tipo comparacao = 2 coisas %>

				</div>

			</section>

		</div>

		<div id="divBloqueio">

		</div>

		<div id="divBloqueioSolido">
			<div style="position:relative; width: 600px; height: 100%; margin: 0px auto;">
				<div id="divPopupCentro" class="boxRounded2 boxShadow" style="position:absolute; top:50%; width: 600px; height:500px; margin-top:-250px; border: medium solid white; background-color: #4682B4;"></div>
			</div>
		</div>

		<script type="text/javascript" src='/qualomelhor.gwt.modules.VotoComparacao/qualomelhor.gwt.modules.VotoComparacao.nocache.js'></script>
		<script type="text/javascript" src='/qualomelhor.gwt.modules.TestePlayN/qualomelhor.gwt.modules.TestePlayN.nocache.js'></script>
		<script type="text/javascript">
			var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false );
			if (iOS) {
				window.addEventListener('DOMContentLoaded', function() {
					$("body").queryLoader2();
				});
			} else {
				$(document).ready(function () {
					$("body").queryLoader2();
				});				
			}
		</script>
	</body>
	
	<% System.out.println("Teste 7 - fim body"); %>

</html>